require(['./config'], () => {
    require(['template', 'header', 'service'], (template) => {
        class buyCar {
            constructor() {
                this.render()
                if (this.cart) {
                    this.setAllCheckStatus()
                    this.calcTotalMoney()
                    this.checksChange()
                    this.allClicked()
                    this.changeNum()
                    this.del()
                    this.duoDel()
                }
            }
            //^渲染页面
            render() {
                let cart = localStorage.getItem('cart')
                if (cart) {
                    $('.cart-empty').hide()
                    $('.main').show()
                    this.cart = JSON.parse(cart)
                    $('#main').html(template('mainTemplate', {
                        cart: this.cart
                    }))
                } else {
                    $('.cart-empty').show()
                    $('.main').hide()
                }
                this.shopNum()
            }
            //^添加商品数量
            shopNum() {
                const num = this.cart.reduce((count, shop) => {
                    return count += shop.count
                }, 0)
                $('.total-num').html(`共 ${num} 件 `)

            }
            //^设置全选状态
            setAllCheckStatus() {
                const isAllCheck = this.cart.every(shop => shop.check)
                // console.log(isAllCheck)
                $('.checkbox-input').prop('checked', isAllCheck)
            }
            //^改变选框状态
            checksChange() {
                const _this = this
                $('.checkBox').on('change', function () {
                    // console.log(this)
                    const id = $(this).parents('tr').data('id')
                    this.cart = _this.cart.map(shop => {
                        if (shop.id === id) {
                            shop.check = $(this).prop('checked')
                        }
                        return shop
                    })
                    // console.log(this.cart)
                    //*存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.setAllCheckStatus()
                    //*重新计算总价
                    _this.calcTotalMoney()
                })
            }
            //^上下全选按钮点击
            allClicked() {
                const this1 = this
                $('.checkbox-input').on('change', function () {
                    const flag = $(this).prop('checked')
                    if (flag) {
                        $('input').prop('checked', true)
                    } else {
                        $('input').prop('checked', false)
                    }
                    console.log(flag)
                    this.cart = this1.cart.map(shop => {
                        shop.check = flag
                        return shop
                    })
                    //*存localStorage
                    localStorage.setItem('cart', JSON.stringify(this1.cart))
                    // //*重新计算总价
                    this1.calcTotalMoney()
                })
            }
            //^计算总价
            calcTotalMoney() {
                const allMoney = this.cart.reduce((money, shop) => {

                    if (shop.check) {
                        money += shop.price * shop.count
                    }
                    return money
                }, 0)
                // console.log(allMoney)
                $('.price').html(allMoney.toFixed(2))
            }
            //^加减数量
            changeNum() {
                const this2 = this
                //*减
                $('.num-minus').on('click', function () {
                    this2.num = $(this).next().val()
                    if (this2.num <= 1) {
                        this2.num = 1
                    } else {
                        this2.num--
                    }
                    $(this).next().val(this2.num)
                    this2.xxxx(this2.num)
                })
                //*加
                $('.num-plus').on('click', function () {
                    this2.num = $(this).prev().val()
                    this2.num++
                    $(this).prev().val(this2.num)
                    this2.xxxx(this2.num)
                })
            }
            xxxx(num) {
                // console.log(num)
                this.cart.map(shop => {
                    shop.count = num
                    return shop
                })
                //*存localStorage
                localStorage.setItem('cart', JSON.stringify(this.cart))
                $('.total-num').html(`共${num}件`)
                // //*重新计算总价
                this.calcTotalMoney()
            }
            //^点击删除
            del() {
                const that = this
                $('.delete-one').on('click', function () {

                    const id = $(this).parents('tr').attr('data-id')
                    that.cart = that.cart.filter(shop => {
                        return shop.id != id
                    })
                    localStorage.setItem('cart', JSON.stringify(that.cart))
                    $(this).parents('tr').remove()
                    that.calcTotalMoney()
                    if (that.cart.length === 0) {
                        localStorage.removeItem('cart')
                        that.render()
                    }
                })
            }
            duoDel() {
                // const flag = true
                $('.delete-multi').on('click', () => {           
                    this.cart = this.cart.filter(shop => {
                        return shop.check != true
                    })
                    console.log(this.cart)
                    localStorage.setItem('cart', JSON.stringify(this.cart))
                    this.render()
                    this.calcTotalMoney()
                    this.checksChange()
                    if (this.cart.length === 0) {
                        localStorage.removeItem('cart')
                        this.render()
                    }
                })
            }
        }
        new buyCar()
    })
})